<template>
  <div class="page-login">
    <div class="page-logo">
      <img :src="`${$baseUrl}image/theme/logo.png`" />
      <span>{{ title }}</span>
    </div>
    <div class="page-login--form">
      <div class="page-login--title">欢迎登录</div>
      <el-form
        ref="loginForm"
        label-position="top"
        :rules="rules"
        :model="formLogin"
        size="default"
      >
        <el-form-item prop="mobile">
          <el-input
            class="num-input"
            v-model="formLogin.mobile"
            placeholder="请输入手机号码"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div class="password-content">
            <el-input
              class="password-input"
              v-model="formLogin.code"
              placeholder="请输入验证码"
            >
            </el-input>
            <el-button size="small" @click="getCode" :disabled="disabled">{{
              codeLabel
            }}</el-button>
          </div>
        </el-form-item>

        <el-button
          size="default"
          @click="submit"
          type="primary"
          class="button-login"
        >
          立即登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { request } from "@/api/_service.js";

export default {
  data() {
    var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号码不能为空"));
      }
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      title: process.env.VUE_APP_TITLE,
      // 表单
      formLogin: {
        mobile: "",
        code: "",
      },
      second: 5,
      codeLabel: "获取验证码",
      disabled: false,
      t: null,
      // 表单校验
      rules: {
        mobile: [
          {
            required: true,
            validator: checkNum,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.t);
  },
  methods: {
    ...mapActions("d2admin/account", ["login"]),

    getCode() {
      clearInterval(this.t);
      this.second = 5
      this.rules.code[0].required = false;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (!this.disabled) {
            
            request({
              url: "/mapi/common/get_code",
              method: "post",
              data: {
                mobile: this.formLogin.mobile,
              },
            }).then((ret) => {
              if (ret.code === 200) this.$message.success("短信成功发送！");
              // this.voiceList =
            });
          }

          this.disabled = true;
          this.t = setInterval(() => {
            this.codeLabel = `${this.second}秒后重新获取`;
            this.second--;
            if (this.second <= 0) {
              // console.log(111)
              this.codeLabel = "获取验证码";
              this.disabled = false;
            }
          }, 1000);
        }
      });
    },
    /**
     * @description 提交表单
     */
    // 提交登录信息
    submit() {
      this.rules.code[0].required = true;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 登录
          // 注意 这里的演示没有传验证码
          // 具体需要传递的数据请自行修改代码
          this.login({
            mobile: this.formLogin.mobile,
            code: this.formLogin.code,
          }).then(() => {
            // 重定向对象不存在则返回顶层路径
            this.$router.replace(this.$route.query.redirect || "/");
          });
        } else {
          // 登录表单校验失败
          this.$message.error("表单校验失败，请检查");
        }
      });
    },
  },
};
</script>

<style lang="scss">
.page-login {
  height: 100%;
  background-image: url(/img/index_bg.ac1ac0d4.jpg);
  background-size: 1920px 1080px;
  background-position: bottom center;
  position: relative;

  .page-logo {
    padding-top: 21px;
    padding-left: 26px;
    display: flex;
    align-items: center;
    font-weight: bold;
    img {
      margin-right: 8px;
      width: 36px;
      height: 45px;
    }

    span {
      font-size: 20px;
    }
  }

  // 登录表单
  .page-login--form {
    box-sizing: border-box;
    padding: 71px 103px;
    position: absolute;
    top: calc(50% - 206px);
    left: calc(50% - 268px);
    width: 536px;
    height: 412px;
    box-shadow: 0px 0px 20px 0px #d2dae4;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;

    .page-login--title {
      font-size: 24px;
      line-height: 33px;
      text-align: center;
      margin-bottom: 24px;
    }

    .num-input {
      input {
        height: 50px;
        font-size: 16px;
        background: #f7f7f7;
        border-radius: 6px;
        border: none;
      }
    }

    .password-content {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .password-input {
        margin-right: 20px;
      }
    }

    .password-input {
      input {
        height: 50px;
        font-size: 16px;
        background: #f7f7f7;
        border-radius: 6px;
        border: none;
      }
    }

    // 登录按钮
    .button-login {
      width: 100%;
      font-size: 16px;
      height: 50px;
    }
  }
}
</style>
